<template>
  <div>
    <h1>ROS Connection</h1>
    <p v-if="rosStatus">连接成功！</p>
    <p v-else>连接中...</p>
    <!-- <button @click="publishToTopic" >发布话题</button> -->
    <!-- <button @click="subscribeToTopic('/map')">订阅话题</button> -->
    <div v-if="message">
      <p>收到的消息: {{ message }}</p>
    </div>
  </div>
</template>

<script>
import ROSLIB from "roslib";
export default {
  data() {
    return {
      ros: null, // ROS连接对象
      rosStatus: false, // 连接状态
      message: "", // 存储收到的消息
      listener: null, // 用于监听的ROS话题
    };
  },
  methods: {
    // 初始化ROS连接
    initRosConnection() {
      this.ros = new ROSLIB.Ros({
        url: "ws://192.168.176.142:9090", // ROS WebSocket服务器地址
      });

      // 监听连接
      this.ros.on("connection", () => {
        console.log("成功连接到ROS");
        this.rosStatus = true;
        this.subscribeToTopic("/map");
      });

      // 监听错误
      this.ros.on("error", (error) => {
        console.log("ROS连接错误: ", error);
      });

      // 监听关闭
      this.ros.on("close", () => {
        console.log("ROS连接关闭");
        this.rosStatus = false;
      });
    },

    // 订阅一个ROS话题
    subscribeToTopic(topic) {
      if (!this.rosStatus) {
        console.log("连接未成功，无法订阅话题");
        return;
      }

      this.listener = new ROSLIB.Topic({
        ros: this.ros,
        name: topic,
        messageType: "nav_msgs/msg/OccupancyGrid",
      });
      console.log("订阅成功");
      // 设置监听事件
      this.listener.subscribe((message) => {
        console.log("收到消息:", message);
        this.message = JSON.stringify(message, null, 2);
      });
    },
    //发布一个话题
    // publishToTopic() {
    //   if (!this.rosStatus) {
    //     console.log("连接未成功，无法发布话题");
    //     return;
    //   }

    //   const topic = new ROSLIB.Topic({
    //     ros: this.ros,
    //     name: "/robot/twist", // 要发布的ROS话题
    //     messageType: "geometry_msgs/Twist",
    //   });
    //   //发布的消息内容
    //   var twist = {
    //     linear: {
    //       x: 0.1,
    //       y: 0.2,
    //       z: 0.3,
    //     },
    //     angular: {
    //       x: -0.1,
    //       y: -0.2,
    //       z: -0.3,
    //     },
    //   };

    //   // And finally, publish.
    //   topic.publish(twist);
    // },
  },

  mounted() {
    // 初始化ROS连接
    this.initRosConnection();
  },

  beforeDestroy() {
    // 销毁监听器
    if (this.listener) {
      this.listener.unsubscribe();
    }
    if (this.ros) {
      this.ros.close();
    }
  },
};
</script>

<style lang="less" scoped>
h1 {
  color: #42b983;
}
button {
  margin-top: 10px;
}
</style>
